<template>
  <div class="charts">
    <a-row v-loading="loading">
      <a-col :span="24">
        <div id="c1" />
        <a-button @click="changeData">更新数据</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import G2 from '@antv/g2';
export default {
  data() {
    return {
      data: [],
      chart: null,
      loading: false
    };
  },
  mounted() {
    this.initG2();
  },
  methods: {
    changeData() {
      console.log('changeData');
      this.data = [
        { genre: '周一', sold: Math.round(Math.random() * 1000) },
        { genre: '周二', sold: Math.round(Math.random() * 1000) },
        { genre: '周三', sold: Math.round(Math.random() * 1000) },
        { genre: '周四', sold: Math.round(Math.random() * 1000) },
        { genre: '周五', sold: Math.round(Math.random() * 1000) },
        { genre: '周六', sold: Math.round(Math.random() * 1000) },
        { genre: '周日', sold: Math.round(Math.random() * 1000) }
      ];
      this.chart.changeData(this.data);
    },
    initG2() {
      this.data = [
        { genre: 'Sports', sold: Math.round(Math.random() * 1000) },
        { genre: 'Strategy', sold: Math.round(Math.random() * 1000) },
        { genre: 'Action', sold: Math.round(Math.random() * 1000) },
        { genre: 'Shooter', sold: Math.round(Math.random() * 1000) },
        { genre: 'Other', sold: Math.round(Math.random() * 1000) }
      ];
      // Step 1: 创建 Chart 对象
      this.chart = new G2.Chart({
        container: document.getElementById('c1'),
        width: 200,
        forceFit: true,
        height: 400 // 指定图表高度
      });
      // Step 2: 载入数据源
      this.chart.source(this.data);
      this.chart.scale('sold', {
        min: 0
      });
      this.chart.scale('genre', {
        range: [0, 1]
      });
      this.chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      });
      this.chart.animate({
        appear: {
          animation: 'fadeIn', // 动画名称
          easing: 'easeQuartIn', // 动画缓动效果
          delay: 3, // 动画延迟执行时间
          duration: 3 // 动画执行时间
        }
      });
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      this.chart.line().position('genre*sold');
      this.chart
        .point()
        .position('genre*sold')
        .size(4)
        .shape('circle')
        .style({
          stroke: '#fff',
          lineWidth: 1
        });
      // Step 4: 渲染图表
      this.chart.render();
    }
  }
};
</script>

<style scoped>
</style>
